<template>
    <div style="height: 100%;">
        <el-row>
            <el-col :span="20">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-select size="small" v-model="params.warehouseId" filterable placeholder="请选择仓库">
                            <el-option v-for="item in warehouseList" :key="item.area" :label="item.areaName" :value="item.area">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        <el-input size="small" prefix-icon='el-icon-s-order' v-model="params.name"
                            placeholder="请输入产品名称"></el-input>
                    </el-col>
                    <el-col :span="4">
                        <el-input size="small" prefix-icon='el-icon-s-order' v-model="params.id"
                            placeholder="请输入产品编码"></el-input>
                    </el-col>
                    <el-col :span="12">
                        <el-date-picker @change="handlerTime" size="small" v-model="params.time" type="daterange"
                            align="right" unlink-panels range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" :picker-options="pickerOptions">
                        </el-date-picker>
                        <el-button size="small" style="margin-left: 10px;" @click="getChangeList">查询</el-button>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="4" style="display: flex;justify-content: flex-end;">
                <el-button size="small" type="primary" @click="openDialog('add')"> 新增</el-button>
            </el-col>
        </el-row>
        <el-row style="margin-top: 10px; height: calc(100% - 100px);overflow: scroll;">
            <el-col>
                <el-table :data="list" border :headerCellStyle="{
                'textAlign': 'center',
                'background': '#66b1ff',
                'color': 'white',
                'fontWeight': 400,

            }" :cellStyle="{
                'textAlign': 'center',
                'fontSize': '12px'
            }">
                    <el-table-column prop="orderName" label="入库单名" min-width="120px"></el-table-column>
                    <el-table-column prop="orderId" label="入库单号" min-width="120px"></el-table-column>
                    <el-table-column label="产品明细" min-width="400px">
                        <template slot-scope="scope">
                            <el-table :data="scope.row.materialList" border height="150px" :headerCellStyle="{
                'textAlign': 'center',
                'fontWeight': 400,

            }" :cellStyle="{
                'textAlign': 'center',
                'fontSize': '12px'
            }">
                                <el-table-column prop="id" label="产品ID"></el-table-column>
                                <el-table-column prop="name" label="产品名称"></el-table-column>
                                <el-table-column prop="count" label="数量"></el-table-column>
<!--                                <el-table-column prop="price" label="单价"></el-table-column>-->
                            </el-table>
                        </template>
                    </el-table-column>
                    <el-table-column label="金额总计" min-width="100px">
                        <template slot-scope="scope">
                            {{ scope.row.totalAmount.toNumber() }} 元
                        </template>
                    </el-table-column>
                    <el-table-column label="数量总计" min-width="100px">
                        <template slot-scope="scope">
                            {{ scope.row.totalCount.toNumber() }} 件
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" min-width="100px">
                        <template slot-scope="scope">
                            <el-tag type='info' v-if="scope.row.status == 0">待审批</el-tag>
                            <el-tag type="success" v-if="scope.row.status == 1">已通过</el-tag>
                            <el-tag type="danger" v-if="scope.row.status == 2">已驳回</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="发起时间" min-width="100px"></el-table-column>
                    <el-table-column prop="remark" label="备注" min-width="200px"></el-table-column>
                    <el-table-column prop="warehouse.warehouseName" label="仓库" min-width="100px"></el-table-column>
                    <el-table-column prop="userInfo.userName" label="发起人" min-width="100px"></el-table-column>
                    <el-table-column fixed="right" label="操作" min-width="160px">
                        <template slot-scope="scope">
                            <div style="display: grid;grid-template-columns: repeat(2,1fr);grid-gap:20px">
                                <div> <el-link type="success">通过</el-link></div>
                                <div>
                                    <el-link type="danger">驳回</el-link>
                                </div>
                                <div> <el-link type="info">备注</el-link></div>
                                <div>
                                    <el-link type="warning" @click="openDialog('detail', scope.row)">明细</el-link>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-pagination style="border-top:1px solid #eee;padding-top: 20px;" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="params.pageNumber" :page-sizes="[20, 30, 50]"
            :page-size="20" layout="total, sizes, prev, pager, next, jumper" align="right" :total="totalPageCount">
        </el-pagination>
        <el-dialog :close-on-click-modal="false" width="80%" :title="dialogTitle" :visible.sync="dialogVisible" :before-close="handleClose">
            <div v-if="dialogTitle === '新增入库产品'">
                <div style="display: grid;grid-template-columns: repeat(3,1fr);grid-gap: 20px;">
                    <div><span><span style="color:red;margin-right: 5px;">*</span>更改单名</span><el-input
                            palceholder="请输入名称" v-model="createForm.name"></el-input></div>
                    <div><span><span style="color:red;margin-right: 5px;">*</span>仓库</span>
                        <div>
                            <el-select style="width:100%" v-model="createForm.warehouseId" filterable
                                placeholder="请选择仓库">
                                <el-option v-for="item in warehouseList" :key="item.area" :label="item.areaName" :value="item.area">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div><span><span style="color:red;margin-right: 5px;">*</span>更改日期</span>
                        <div>
                            <el-date-picker style="width: 100%;" v-model="createForm.time" type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </div>
                    </div>
                    <div><span><span style="color:red;margin-right: 5px;">*</span>备注</span><el-input rows='7'
                            palceholder="请输入备注" type="textarea" v-model="createForm.name"></el-input></div>
                    <div>
                        <upload title="入库凭证上传" @imgUrl="inOutVoucherUrl" :clearImgUrl="inOutVoucherClearImgUrl"
                            :multipleStatus="true" />
                    </div>
                    <div>
                        <upload title="付款凭证上传" @imgUrl="paymentVoucherUrl" :clearImgUrl='paymentVoucherClearImgUrl'
                            uploadType="drag" :multilineStatus="true" />
                    </div>
                </div>
                <div style="margin: 20px;display: flex;align-items: center;justify-content: space-between;">
                    <div><span><span style="color:red;margin-right: 5px;">*</span>材料入库</span></div>
                    <div>
                        <el-select style="width: 300px" size="small" v-model="queryList" filterable placeholder="请选择产品">
                            <el-option v-for=" item, i in waitSelectList" :key="i"
                                :label="`${item.productCode} ${item.productName}`" :value="item.productCode">
                            </el-option>
                        </el-select>
                        <el-button size="small" @click="addMaterial" style="margin-left:10px">添加</el-button>
                    </div>
                </div>
                <div style="margin-bottom: 10px;">
                    <el-table :data="tableData" maxHeight='300px' border :headerCellStyle="{
                'textAlign': 'center',
                'fontWeight': 400,
                'background': '#66b1ff',
                'color': 'white',
            }" :cellStyle="{
                'textAlign': 'center',
                'fontSize': '12px'
            }">
                        <el-table-column prop="productName" label="产品名称"></el-table-column>
                        <el-table-column prop="productCode" label="产品编码"></el-table-column>
                        <el-table-column label="入库数量">
                            <template slot-scope="scope">
                                <el-input-number v-if="scope.row.count > 0" v-model="scope.row.count" :min="1"></el-input-number>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-link @click='deleteMaterial(scope.row.productCode)'>删除</el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div v-else>
                <div style="margin:10px 0;"><span style="margin-right: 10px;color:red;">*</span>入库信息</div>
                <el-descriptions :column="4" size="small" border :contentStyle="{ 'text-align': 'center' }">
                    <el-descriptions-item label="入库单名">{{ productInfo.orderName }}</el-descriptions-item>
                    <el-descriptions-item label="入库单号">{{ productInfo.orderId }}</el-descriptions-item>
                    <el-descriptions-item label="金额">{{ productInfo.totalAmount }}元</el-descriptions-item>
                    <el-descriptions-item label="数量">{{ productInfo.totalCount }}件</el-descriptions-item>
                    <el-descriptions-item label="状态">
                        <el-tag type='info' v-if="productInfo.status == 0">待审批</el-tag>
                        <el-tag type="success" v-if="productInfo.status == 1">已通过</el-tag>
                        <el-tag type="danger" v-if="productInfo.status == 2">已驳回</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="仓库">{{ productInfo.warehouse.warehouseName }}</el-descriptions-item>
                    <el-descriptions-item label="发起人">{{ productInfo.userInfo.userName }}</el-descriptions-item>
                    <el-descriptions-item label="时间">{{ productInfo.createTime }}</el-descriptions-item>
                </el-descriptions>
                <div style="display: grid;grid-template-columns: repeat(2,1fr);">
                    <div>
                        <div style="margin:10px 0;"><span style="margin-right: 10px;color:red;">*</span>付款凭证</div>
                        <div>
                            <el-image :preview-src-list="[host + v]"
                                v-for="(v, i) in productInfo.paymentVoucherList" :key='i' :src='host + v'
                                style="width: 60px;margin-right: 5px;"></el-image>
                        </div>
                    </div>
                    <div>
                        <div style="margin:10px 0;"><span style="margin-right: 10px;color:red;">*</span>入库凭证</div>
                        <div>
                            <el-image :preview-src-list='[host + v]'
                                v-for="(v, i) in productInfo.inOutVoucherList" :key='i' :src='host + v'
                                style="width: 60px;margin-right: 5px;"></el-image>
                        </div>
                    </div>
                </div>
                <div>
                    <div style="margin:10px 0;"><span style="margin-right: 10px;color:red;">*</span>入库明细</div>
                    <el-table :data="productInfo.materialList" border max-height="400px" :headerCellStyle="{
                'textAlign': 'center',
                'fontWeight': 400,
                'background': '#66b1ff',
                'color': 'white',
            }" :cellStyle="{
                'textAlign': 'center',
                'fontSize': '12px'
            }">
                        <el-table-column prop="id" label="产品ID"></el-table-column>
                        <el-table-column prop="name" label="产品名称"></el-table-column>
                        <el-table-column prop="count" label="数量"></el-table-column>
<!--                        <el-table-column prop="price" label="单价"></el-table-column>-->
                    </el-table>
                </div>
            </div>
            <div slot="footer" class="dialog-footer" v-if="dialogTitle === '新增入库产品'">
                <el-button type="primary" @click="InventoryAddOrder">入库</el-button>

            </div>
        </el-dialog>
    </div>
</template>
<script>
import * as areaItem from '@/assets/js/params.js';
import upload from '@/RayComponents/upload.vue'
import dayjs from "dayjs";
import Decimal from 'decimal.js'
export default {
    components: {
        upload
    },
    watch: {

    },
    created() {
        this.getChangeList();
        this.getMaterialList();
        this.getProvince();
    },
    data() {
        return {
            host: this.$imgHost,
            inOutVoucherClearImgUrl: false,
            paymentVoucherClearImgUrl: false,
            // warehouseList: areaItem.AREA_MAP,
            warehouseList:[],
            dialogVisible: false,
            dialogTitle: '',
            queryList: '',
            totalPageCount:0,
            waitSelectList: [],
            pickerOptions: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
            list: [

            ],
            productInfo: {
                warehouse: {
                    warehouseName: ''
                },
                userInfo: {
                    userName: ''
                },
                list: [],
                paymentVoucherList: [],
                inOutVoucherList: []
            },
            params: {
                id: '',
                time: '',
                name: '',
                warehouseId: '',
                startTime: '',
                endTime: '',
                pageNumber: 1,
                pageSize: 20,
                totalCount:0

            },
            tableData: [],
            createForm: {
                warehouseId: '',
                time: '',
                name: '',
                remark: '',
                paymentVoucher: '',
                inOutVoucher: ''
            },

        };
    },
    methods: {
       getProvince(){
        this.$api.areaLedgerAreaList().then(res=>{
            this.warehouseList  =res;
        })
       },
        deleteMaterial(id) {
            this.tableData = this.tableData.filter(el => el.productCode != id);
        },
        addMaterial() {
            this.waitSelectList.map(el => {
                if (el.productCode == this.queryList) {
                    //双向绑定数据过深 
                    this.tableData.push(JSON.parse(JSON.stringify(el)))
                }
            })
        },
        getMaterialList() {
            let params = {
                pageNumber: 1,
                pageSize: 1000000
            }
            this.$api.getMaterial(params).then(res => {
                this.waitSelectList = res.data;
                this.waitSelectList.map(el=>{
                    el.count = 1;
                })
            })
        },
        handleClose() {
            this.dialogVisible = false;
            this.inOutVoucherClearImgUrl = true;
            this.paymentVoucherClearImgUrl = true;
        },
        paymentVoucherUrl(e) {
            this.createForm.paymentVoucher = e.join(',')
            console.log(this.createForm)
        },
        inOutVoucherUrl(e) {
            this.createForm.inOutVoucher = e.join(',')
            console.log(this.createForm)
        },
        handlerTime() {
            this.params.startTime = dayjs(this.params.time[0]).format("YYYY-MM-DD");
            this.params.endTime = dayjs(this.params.time[1]).format("YYYY-MM-DD");
        },
        InventoryAddOrder() {
            let inCountData = [];
            this.tableData.map(el=>{
                if(el.count >0) inCountData.push({count:el.count,productCode:el.productCode})
             })
             this.createForm.materialList = inCountData;
             if(inCountData.length == 0) {
                this.$message.error('请选择入库产品!');
                 return;
             } 
             for(let i in this.createForm){
                if(this.createForm[i] == ''){
                    this.$message.error('请检查信息!');
                    return;
                }
             }
        },
        getChangeList() {
            let params = {
                startTime: this.params.startTime,
                endTime: this.params.endTime,
                orderName: this.params.name,
                orderId: this.params.id,
                warehouseId: this.params.warehouseId,
                pageSize: this.params.pageSize,
                pageNumber: this.params.pageNumber
            }
            this.$api.inStorageInStorageList(params).then(res=>{
                this.totalPageCount = res.total;
            })
            let list = [
                {
                    inOutVoucher: '1715734187267.jpg,1715734187267.jpg',
                    paymentVoucher: '1715734187267.jpg,1715734187267.jpg',
                    orderName: '第三批次', orderId: 'RK20240526199', status: 0, materialList: [
                        { count: 100, name: '端头', id: 'LB-K', price: 200 },
                        { count: 100, name: '端头', id: 'LB-K', price: 201 },
                        { count: 100, name: '端头', id: 'LB-K', price: 200 },
                        { count: 100, name: '端头', id: 'LB-K', price: 201 },
                    ], remark: '产品录入错误', 'createTime': '2024-05-24', userInfo: { userName: 'admin' }, warehouse: { warehouseName: '湖南' }, supplider: { name: '江盟' }
                },
                {
                    inOutVoucher: '127c0a5d1ffc254b575530700fedf2a1.png,127c0a5d1ffc254b575530700fedf2a1.png',
                    paymentVoucher: '95b33470641b453586286a460ff692f5.png,95b33470641b453586286a460ff692f5.png',
                    orderName: '第三批次', orderId: 'RK20240526199', status: 1, materialList: [
                        { count: 100, name: '端头', id: 'LB-K', price: 200 },
                        { count: 100, name: '端头', id: 'LB-K', price: 201 },
                        { count: 100, name: '端头', id: 'LB-K', price: 200.99 },
                        { count: 100, name: '端头', id: 'LB-K', price: 201 },
                    ], remark: '产品录入错误', 'createTime': '2024-05-24', userInfo: { userName: 'admin' }, warehouse: { warehouseName: '湖南' }, supplider: { name: '江盟' }
                },
                {
                    inOutVoucher: '1715734187267.jpg,1715734187267.jpg',
                    paymentVoucher: '1715734187267.jpg,1715734187267.jpg',
                    orderName: '第三批次', orderId: 'RK20240526199', status: 1, materialList: [
                        { count: 100, name: '端头', id: 'LB-K', price: 200 },
                        { count: 100, name: '端头', id: 'LB-K', price: 201 },
                        { count: 100, name: '端头', id: 'LB-K', price: 200.99 },
                        { count: 100, name: '端头', id: 'LB-K', price: 201 },
                    ], remark: '产品录入错误', 'createTime': '2024-05-24', userInfo: { userName: 'admin' }, warehouse: { warehouseName: '湖南' }, supplider: { name: '江盟' }
                },
                {
                    inOutVoucher: '127c0a5d1ffc254b575530700fedf2a1.png,127c0a5d1ffc254b575530700fedf2a1.png',
                    paymentVoucher: '95b33470641b453586286a460ff692f5.png,95b33470641b453586286a460ff692f5.png',
                    orderName: '第三批次', orderId: 'RK20240526199', status: 1, materialList: [
                        { count: 100, name: '端头', id: 'LB-K', price: 200 },
                        { count: 100, name: '端头', id: 'LB-K', price: 201 },
                        { count: 100, name: '端头', id: 'LB-K', price: 200.99 },
                        { count: 100, name: '端头', id: 'LB-K', price: 201 },
                    ], remark: '产品录入错误', 'createTime': '2024-05-24', userInfo: { userName: 'admin' }, warehouse: { warehouseName: '湖南' }, supplider: { name: '江盟' }
                },
                {
                    inOutVoucher: '127c0a5d1ffc254b575530700fedf2a1.png,127c0a5d1ffc254b575530700fedf2a1.png',
                    paymentVoucher: '95b33470641b453586286a460ff692f5.png,95b33470641b453586286a460ff692f5.png',
                    orderName: '第三批次', orderId: 'RK20240526199', status: 1, materialList: [
                        { count: 100, name: '端头', id: 'LB-K', price: 200 },
                        { count: 100, name: '端头', id: 'LB-K', price: 201 },
                        { count: 100, name: '端头', id: 'LB-K', price: 200.99 },
                        { count: 100, name: '端头', id: 'LB-K', price: 201 },
                    ], remark: '产品录入错误', 'createTime': '2024-05-24', userInfo: { userName: 'admin' }, warehouse: { warehouseName: '湖南' }, supplider: { name: '江盟' }
                },
                {
                    inOutVoucher: '127c0a5d1ffc254b575530700fedf2a1.png,127c0a5d1ffc254b575530700fedf2a1.png',
                    paymentVoucher: '95b33470641b453586286a460ff692f5.png,95b33470641b453586286a460ff692f5.png',
                    orderName: '第三批次', orderId: 'RK20240526199', status: 0, materialList: [
                        { count: 100, name: '端头', id: 'LB-K', price: 200 },
                        { count: 100, name: '端头', id: 'LB-K', price: 201 },
                        { count: 100, name: '端头', id: 'LB-K', price: 200 },
                        { count: 100, name: '端头', id: 'LB-K', price: 201 },
                    ], remark: '产品录入错误', 'createTime': '2024-05-24', userInfo: { userName: 'admin' }, warehouse: { warehouseName: '湖南' }, supplider: { name: '江盟' }
                },
                {
                    inOutVoucher: '127c0a5d1ffc254b575530700fedf2a1.png,127c0a5d1ffc254b575530700fedf2a1.png',
                    paymentVoucher: '95b33470641b453586286a460ff692f5.png,95b33470641b453586286a460ff692f5.png',
                    orderName: '第三批次', orderId: 'RK20240526199', status: 2, materialList: [
                        { count: 100, name: '端头', id: 'LB-K', price: 200 },
                        { count: 100, name: '端头', id: 'LB-K', price: 201 },
                        { count: 100, name: '端头', id: 'LB-K', price: 200 },
                        { count: 100, name: '端头', id: 'LB-K', price: 201 },
                    ], remark: '产品录入错误', 'createTime': '2024-05-24', userInfo: { userName: 'admin' }, warehouse: { warehouseName: '湖南' }, supplider: { name: '江盟' }
                }
            ]
            list.map(el => {
                el.totalAmount = new Decimal(0);
                el.totalCount = new Decimal(0)
                el.materialList.map(k => {
                    el.totalAmount = Decimal(el.totalAmount).plus(Decimal(k.price))
                    el.totalCount = Decimal(el.totalCount).plus(Decimal(k.count))
                })
            })
            this.list = list;
        },
        openDialog(type, info) {
            this.inOutVoucherClearImgUrl = false;
            this.paymentVoucherClearImgUrl = false;
            if (type === 'add') {
                this.dialogTitle = '新增入库产品'
            } else if (type === 'detail') {
                this.productInfo = info;
                this.dialogTitle = '查看入库产品'
                this.productInfo.inOutVoucherList = info.inOutVoucher.split(',');
                this.productInfo.paymentVoucherList = info.paymentVoucher.split(',')
            }

            this.dialogVisible = true;
        },
        handleSizeChange(e) {
            this.params.pageSize = e;
        },
        handleCurrentChange(e) {
            this.params.pageNumber = e;
        },

    }
};
</script>
<style lang="less" scoped></style>